{% extends "bbs/profile/profile_base.html" %}

{% block title %}修改密码 - 有容论坛{% endblock %}

{% block styles %}
{{ super() }}
<!-- 引入密码验证JS -->
<script src="/static/js/password_validator.js"></script>
{% endblock %}

{% block profilecontent %}
{{ super() }}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">修改 <{{ current_user.nickname }}> 密码</h4>
                </div>
                <div class="card-body">

                    <form id="passwordChangeForm" method="POST" action="{{ url_for('profile.change_password') }}">
                        <input type="hidden" id="csrf_token" name="csrf_token" value="{{ csrf_token }}">
                        <input type="hidden" name="user_id" value="{{ user_id }}">
                        
                        <div class="mb-3">
                            <label for="old_password" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="old_password" name="old_password" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="new_password" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="new_password" name="new_password" required>
                            <div id="passwordStrengthFeedback" class="form-text"></div>
                            <div class="form-text text-muted">密码长度必须大于6位</div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="confirm_password" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                            <div id="passwordMatchFeedback" class="form-text"></div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">修改密码</button>
                            <a href="{{ url_for('profile.profile') }}" class="btn btn-outline-secondary">返回个人资料</a>
                        </div>
                    </form>
                </div>
                <div class="card-footer text-muted">
                    <small>密码修改成功后将自动退出登录，需要使用新密码重新登录</small>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 表单已通过password_validator.js初始化，这里可以添加其他自定义逻辑
        console.log('密码修改页面已加载');
    });
</script>
{% endblock %}